
// 添加类型的 - 弹出层上的 表单标签
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn sure" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="submit" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;

// 渲染列表
function render() {
  axios.get('http://api-breakingnews-web.itheima.net/my/article/cates',{headers:{Authorization:localStorage.getItem('token')}}).then(({data:res})=>{
      console.log(res);
      if(res.status === 0){
        // 先清空 在渲染
        $('tbody').empty()
        // 遍历数据 渲染
      res.data.forEach((obj)=>{
        const theTr = `<tr>
        <td>${obj.name}</td>
        <td>${obj.alias}</td>
        <td>
          <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
    
          <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
        </td>
      </tr>`
      $('tbody').append(theTr)
      })
  }
  })
}
render()


//删除
$('tbody').on('click','.delete',function () {
  const Id = $(this).attr('myid')
  // console.log(Id);
   axios({
     method:'GET',
     url:`http://api-breakingnews-web.itheima.net/my/article/deletecate/${Id}`,
     headers:{
      Authorization:localStorage.getItem('token')
    }
   }).then(({data:res})=>{
     layer.msg(res.message)
     if(res.status === 0){
       $(this).parents('tr').remove()
     }
   })
})

//修改
$('tbody').on('click','.edit',function () {
  //分类的名字
  const name = $(this).attr('data-name')
  //分类的别名
  const alias = $(this).attr('data-alias')
  //分类的Id -- 大写
  const Id = $(this).attr('myid')
  let index = layer.open({
    type: 1, 
    title:'编辑类别',
    area: ['500px', '300px'],
    content: edit_str, //这里content是一个普通的String
    success:function () {
      // layui.form表单的快速赋值
      form.val('edit',{
        alias,name,Id
      })
      //给form表单注册submit事件
      $('form').on('submit',function (e) {
         e.preventDefault()
         axios({
          method:'POST',
          url:'http://api-breakingnews-web.itheima.net/my/article/updatecate',
          data:$('.add-form').serialize(),
          //自定义请求头
          headers:{
            Authorization:localStorage.getItem('token')
          },
          data:$('#edit_form').serialize()
        }).then(({data:res})=>{
          console.log(res);
          layer.msg(res.message)
          if(res.status === 0){
            //关闭弹出层
            layer.close(index)
            //重新渲染
            render()
          }
        })
      })
    }
  });
})

//添加
$('.add').on('click',()=>{
  let index = layer.open({
    type: 1, 
    title:'添加类别',
    area: ['500px', '300px'],
    content: add_str, //这里content是一个普通的String
    success:function () {
      //注册表单的submit事件
       $('.add-form').on('submit',(e)=>{
        e.preventDefault()
        axios({
          method:'POST',
          url:'http://api-breakingnews-web.itheima.net/my/article/addcates',
          data:$('.add-form').serialize(),
          //自定义请求头
          headers:{
            Authorization:localStorage.getItem('token')
          }
        }).then(({data:res})=>{
          console.log(res);
          layer.msg(res.message)
          if(res.status === 0){
            //关闭弹出层
            layer.close(index)
            //重新渲染
            render()
          }
        })
       })
    }
  });
})

// 编辑弹窗的内容
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;

       
  const form = layui.form;
  form.verify({
      ctname: [
          /^[\u4E00-\u9FA5]+$/,
          "分类名只能是中文"
      ],
      aliname: [
          /^[a-z\u4E00-\u9FA5]+$/,
          "小写英文和中文组成"
      ]
  })     